Saltar al contenido principal

Habilitación del Módulo de Manipulación de Swiper

Si estás usando el módulo Product Video de Smart Modules en un tema de PrestaShop que usa Swiper Slider, podrías encontrar un problema donde la miniatura del video no aparece junto a las imágenes de tu producto.

Esto generalmente sucede cuando el módulo Manipulation de Swiper no ha sido habilitado. El módulo es esencial para permitir que elementos dinámicos (como diapositivas de video) se inserten en el slider en tiempo de ejecución.

🧠 ¿Cuándo Necesitas Esto?​

Podrías ver un error como este en la consola de tu navegador:

peligro

Uncaught TypeError: slider.addSlide is not a function

Por qué sucede esto

Este error significa que el slider Swiper en tu tema no está inicializado con el módulo Manipulation, que es requerido por el módulo Product Video para agregar dinámicamente miniaturas de video como diapositivas.

¿Las buenas noticias? Solucionar esto solo requiere una pequeña edición en el código de inicialización de Swiper de tu tema.

🛠️ Paso a Paso: Cómo Habilitar el Módulo de Manipulación​

1. Localiza el Código de Inicialización de Swiper​

En los archivos de tu tema, localiza el archivo JavaScript que inicializa el slider de imágenes del producto. Esto típicamente se encuentra en:

/themes/tu-tema/assets/js/product.js
/themes/tu-tema/js/product.js
/themes/tu-tema/js/custom.js

Busca una configuración de Swiper como esta:

var swiper = new Swiper('.swiper-container', {
  // tus opciones de Swiper
});

2. Agrega el Módulo Manipulation​

Dentro de la configuración de Swiper, encuentra la propiedad modules. Agrega Manipulation a la lista.

Ejemplo antes:

modules: [Navigation, Pagination],

Actualiza a:

modules: [Navigation, Pagination, Manipulation],

Si la propiedad modules aún no existe, agrégala así:

modules: [Manipulation],
Mantén los módulos existentes

No elimines ningún módulo existente — solo agrega Manipulation a la lista.

3. Limpia la Caché de PrestaShop​

Después de guardar tus cambios:

  1. Ve a tu Back Office
  2. Navega a Parámetros Avanzados > Rendimiento
  3. Haz clic en Limpiar Caché

Esto asegura que tu JavaScript actualizado se cargue correctamente.

4. Prueba el Resultado​

Recarga cualquier página de producto con un video adjunto. Si todo está correcto, la miniatura del video ahora aparecerá como parte de la galería de imágenes del producto, completamente integrada en el slider Swiper.

📚 Enlaces Relacionados​

💬 ¿Aún Necesitas Ayuda?​

Si no estás seguro de dónde se encuentra este código o cómo modificarlo, no dudes en contactar a nuestro equipo de soporte. También puedes enviarnos el archivo donde Swiper está inicializado, y con gusto te guiaremos a través del cambio.

Siguiendo estos pasos, asegurarás la compatibilidad completa entre el slider Swiper de tu tema y el módulo Product Video de Smart Modules, manteniendo tus miniaturas de video funcionando sin problemas y evitando cualquier error de JavaScript.